<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello React!</title>
    <!--注意导入顺序-->
    <script src="../bower_components/react/react.production.min.js"></script>
    <script src="../bower_components/react/react-dom.production.min.js"></script>
    <script src="./js/prop-types.js"></script>
    <!--将JSX语法 转换成javascript语法 -->
    <script src="../bower_components/babel/browser.min.js"></script>

    <link rel="stylesheet" href="../script/bootstrap-3.3.7.min.css">
</head>
<body>
<div id="example"></div>

<script type="text/babel">

    // 生命周期 三个状态
    // Mounting 组件挂载  ，已经插入DOM
    // Updating 组件更新， 正在渲染 或 重新渲染
    // Unmounting 组件移除， 移出DOM

    // 四个阶段
    // 创建，实例化，更新，销毁

    /*
    1.Mounting 相关
        componentWillMount 会在组件render之前执行，并且永远都只执行一次。
        render
        componentDidMount 组件加载完毕之后立即执行,重复渲染只执行一次
    2. Updating 相关
        2.1 componentWillReceiveProps(object nextProps)
           组件接收到一个新的prop时被执行。这个方法在初始化render时不会被调用
        2.2 shouldComponentUpdate(object nextProps, object nextState)
            返回一个布尔值。在组件接收到新的props或者state时被执行 true,重新渲染，false不会重新渲染
            todo true 会执行 2.3 , 2.4,2.5 后面三个方法
            初始化时不会被执行
        2.3 componentWillUpdate(object nextProps, object nextState)
            在组件接收到新的props或者state但还没有render时被执行， 一般在渲染之前， 初始化时不会被执行
        2.4  render
        2.5 componentDidUpdate
            组件完成更新后立即执行，  初始化时不会被执行

     3. Unmounting
        3.1 componentWillUnmount
             组件从DOM unmount后立即执行
     */
    class InputText extends React.Component {

        // todo 一、初始化阶段 加载props,state
        constructor(props) {
            super(props)
            this.state = {text: "please input"} // todo 初始化打印的文字
        }

        // todo 二、组件挂载
        componentWillMount() {
            console.log("1. this is componentWillMount,组件将要挂载")
            return null
        }
        componentDidMount() {
            console.log("2. this is componentDidMount ,组件挂载完成")

        }

        componentWillReceiveProps(nextProps, nextContext) {
            //todo 父组件多次渲染子组件，会触发
            console.log("3. this is  componentWillReceivePropst ,组件更新，两次 ReactDOM.render 实现效果",nextProps,nextContext)
            return null
        }
        shouldComponentUpdate(nextProps, nextState, nextContext) {
            console.log("4. this is  shouldComponentUpdate ,组件是否要更新",nextProps, nextState, nextContext);
            // this.state.text="修改过"
            return true // 这里返回true ,后面才执行
        }

        componentWillUpdate(nextProps, nextState, nextContext) {
            console.log("5. this is  componentWillReceivePropst ,组件将要更新",nextProps, nextState, nextContext)
        }

        componentDidUpdate(prevProps, prevState, snapshot) {
            console.log("6. this is  componentDidUpdate ,组件更新完成",prevProps, prevState, snapshot)
        }

        componentWillUnmount() {
            console.log("7. this is  componentWillUnmount ,组件将要移除")
        }

        componentDidCatch(error, errorInfo) { // todo 移除时错误 才有此方法
            console.log("8. this is  componentWillUnmount ,组件移除完成",error, errorInfo)
        }

        handleChange(event) { // todo event
            this.setState({
                text: event.target.value  //
            })
        }

        render() {
            console.log("this is render")
            return ( //
                <div>
                    <input type="text" onChange={this.handleChange.bind(this)} placeholder={this.state.text}/>
                    <label>{this.state.text}</label>
                </div>
            )
        }
    }



    ReactDOM.render(
        <InputText/>,
        document.getElementById("example")
    )

    ReactDOM.render(
        <InputText/>,
        document.getElementById("example")
    )
    ReactDOM.unmountComponentAtNode(document.getElementById("example"))
</script>
</body>

</html>